<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="竞赛名称" prop="competitionId">
        <el-select v-model="queryParams.competitionId" placeholder="请选择竞赛" clearable style="width: 200px;">
          <el-option
            v-for="competition in competitionList"
            :key="competition.id"
            :label="competition.name"
            :value="competition.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参赛者姓名" prop="participantName">
        <el-input
          v-model="queryParams.participantName"
          placeholder="请输入参赛者姓名"
          clearable
          style="width: 180px;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所在学校" prop="schoolName">
        <el-input
          v-model="queryParams.schoolName"
          placeholder="请输入所在学校"
          clearable
          style="width: 180px;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="报名类型" prop="signupType">
        <el-select v-model="queryParams.signupType" placeholder="请选择报名类型" clearable style="width: 120px;">
          <el-option label="个人赛" value="1"></el-option>
          <el-option label="团队赛" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报名状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择报名状态" clearable style="width: 120px;">
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已通过" value="1"></el-option>
          <el-option label="已拒绝" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['race:competitionSignup:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          size="small"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['race:competitionSignup:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          size="small"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['race:competitionSignup:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          size="small"
          @click="handleExport"
          v-hasPermi="['race:competitionSignup:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="signupList" @selection-change="handleSelectionChange" style="width: 100%; min-height: 400px;">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="报名ID" align="center" prop="id" width="80" />
      <el-table-column label="竞赛名称" align="center" width="150" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ getCompetitionName(scope.row.competitionId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组名" align="center" width="120" show-overflow-tooltip>
        <template #default="scope">
          <span>{{ scope.row.groupName || '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="参赛者姓名" align="center" prop="participantName" width="120" show-overflow-tooltip />
      <el-table-column label="联系电话" align="center" prop="contactPhone" width="130" show-overflow-tooltip />
      <el-table-column label="所在学校" align="center" prop="schoolName" width="150" show-overflow-tooltip />
      <el-table-column label="报名类型" align="center" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.signupType === 1 ? 'success' : 'warning'" size="small">
            {{ scope.row.signupType === 1 ? '个人赛' : scope.row.signupType === 2 ? '团队赛' : '未知' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="报名状态" align="center" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)" size="small">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            size="small"
            link
            icon="View"
            @click="handleView(scope.row)"
          >查看</el-button>
          <el-button
            size="small"
            link
            icon="Edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="small"
            link
            icon="Check"
            @click="handleAudit(scope.row, 1)"
            v-if="scope.row.status === 0"
            style="color: #67C23A;"
          >通过</el-button>
          <el-button
            size="small"
            link
            icon="Close"
            @click="handleAudit(scope.row, 2)"
            v-if="scope.row.status === 0"
            style="color: #F56C6C;"
          >拒绝</el-button>
          <el-button
            size="small"
            link
            icon="Delete"
            @click="handleDelete(scope.row)"
            style="color: #F56C6C;"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改竞赛报名信息对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="竞赛名称" prop="competitionId">
              <el-select v-model="form.competitionId" placeholder="请选择竞赛" style="width: 100%;" @change="handleCompetitionChange">
                <el-option
                  v-for="competition in competitionList"
                  :key="competition.id"
                  :label="competition.name"
                  :value="competition.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名类型" prop="signupType">
              <el-tag :type="form.signupType === 1 ? 'success' : 'warning'" size="medium">
                {{ form.signupType === 1 ? '个人赛' : '团队赛' }}
              </el-tag>
              <span style="margin-left: 10px; color: #909399; font-size: 12px;">
                (根据竞赛赛制自动判断)
              </span>
              <div v-if="form.signupType === 2" style="margin-top: 5px;">
                <el-alert
                  title="团队赛提示"
                  type="info"
                  :closable="false"
                  show-icon
                  style="font-size: 12px;"
                >
                  <template #default>
                    <p style="margin: 0;">• 团队赛需要填写组名和团队成员信息</p>
                    <p style="margin: 5px 0 0 0;">• 最多可添加 {{ maxTeamSize }} 名成员</p>
                    <p style="margin: 5px 0 0 0;">• 第一个成员默认为队长</p>
                  </template>
                </el-alert>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.signupType === 2">
          <el-col :span="12">
            <el-form-item label="组名" prop="groupName">
              <el-input v-model="form.groupName" placeholder="请输入组名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="团队成员数量" prop="teamMemberCount">
              <el-input-number 
                v-model="form.teamMemberCount" 
                :min="1" 
                :max="maxTeamSize" 
                @change="handleTeamSizeChange"
                :disabled="maxTeamSize <= 1"
              />
              <span style="margin-left: 10px; color: #909399; font-size: 12px;">
                (最多{{ maxTeamSize }}人)
              </span>
              <el-button 
                type="primary" 
                size="small" 
                icon="Plus" 
                class="add-member-btn"
                @click="addTeamMember"
                :disabled="teamMembers.length >= maxTeamSize - 1"
              >
                添加成员
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 队长信息 -->
        <div v-if="form.signupType === 2">
          <el-divider content-position="left">
            <span style="color: #409eff; font-weight: 600;">
              <i class="el-icon-user-solid" style="margin-right: 8px;"></i>
              队长信息
            </span>
          </el-divider>
          
          <div class="team-leader-section">
            <!-- 2x2 网格布局 -->
            <div class="form-grid">
              <!-- 基本信息 -->
              <div class="form-section">
                <h4 class="section-title">基本信息</h4>
                <el-form-item label="姓名" prop="leaderName">
                  <el-input 
                    v-model="form.leaderName" 
                    placeholder="请输入姓名"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="电话" prop="leaderPhone">
                  <el-input 
                    v-model="form.leaderPhone" 
                    placeholder="请输入电话"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input 
                    v-model="form.leaderEmail" 
                    placeholder="请输入邮箱"
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <!-- 学术信息 -->
              <div class="form-section">
                <h4 class="section-title">学术信息</h4>
                <el-form-item label="学校">
                  <el-input 
                    v-model="form.leaderSchool" 
                    placeholder="请输入学校"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="院系">
                  <el-input 
                    v-model="form.leaderDepartment" 
                    placeholder="请输入院系"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="专业">
                  <el-input 
                    v-model="form.leaderMajor" 
                    placeholder="请输入专业"
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <!-- 身份信息 -->
              <div class="form-section">
                <h4 class="section-title">身份信息</h4>
                <el-form-item label="学号">
                  <el-input 
                    v-model="form.leaderStudentId" 
                    placeholder="请输入学号"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input 
                    v-model="form.leaderIdCard" 
                    placeholder="请输入身份证号"
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <!-- 证件上传 -->
              <div class="form-section">
                <h4 class="section-title">证件上传</h4>
                <el-form-item label="学生证图片">
                  <MinioImageUpload 
                    v-model="form.leaderStudentCardUrl"
                    :limit="1"
                    :file-size="2"
                    :file-type="['jpg', 'png', 'jpeg']"
                    :show-file-list="true"
                    @upload-success="handleLeaderCardSuccess"
                  />
                </el-form-item>
                <el-form-item label="身份证图片">
                  <MinioImageUpload 
                    v-model="form.leaderIdCardUrl"
                    :limit="1"
                    :file-size="2"
                    :file-type="['jpg', 'png', 'jpeg']"
                    :show-file-list="true"
                    @upload-success="handleLeaderIdCardSuccess"
                  />
                </el-form-item>
              </div>
            </div>
            
            <el-form-item label="备注" prop="remark">
              <el-input 
                v-model="form.remark" 
                type="textarea" 
                placeholder="请输入备注信息"
                :rows="3"
              />
            </el-form-item>
          </div>
        </div>
        
        <!-- 团队成员信息 -->
        <div v-if="form.signupType === 2 && teamMembers.length > 0">
          <el-divider content-position="left">
            <span style="color: #409eff; font-weight: 600;">
              <i class="el-icon-user" style="margin-right: 8px;"></i>
              团队成员信息
            </span>
            <span style="margin-left: 10px; color: #909399; font-size: 12px;">
              ({{ teamMembers.length }}/{{ maxTeamSize - 1 }}人)
            </span>
          </el-divider>
          <div 
            v-for="(member, index) in teamMembers" 
            :key="index" 
            class="team-member-card"
          >
            <div class="team-member-header">
              <div class="member-info">
                <div class="member-avatar">
                  <i class="el-icon-user"></i>
                </div>
                <div class="member-details">
                  <h4 class="team-member-title">
                    成员{{ index + 1 }}
                  </h4>
                  <p class="member-role">团队成员</p>
                </div>
              </div>
              <el-button 
                type="danger" 
                size="small" 
                icon="Delete" 
                @click="removeTeamMember(index)"
                class="remove-member-btn"
                circle
              />
            </div>
            
            <div class="member-form-content">
              <!-- 2x2 网格布局 -->
              <div class="form-grid">
                <!-- 基本信息 -->
                <div class="form-section">
                  <h4 class="section-title">基本信息</h4>
                  <el-form-item :label="'姓名'" :prop="'teamMembers.' + index + '.memberName'">
                    <el-input 
                      v-model="member.memberName" 
                      placeholder="请输入姓名"
                      size="large"
                    />
                  </el-form-item>
                  <el-form-item :label="'电话'" :prop="'teamMembers.' + index + '.memberPhone'">
                    <el-input 
                      v-model="member.memberPhone" 
                      placeholder="请输入电话"
                      size="large"
                    />
                  </el-form-item>
                  <el-form-item :label="'邮箱'">
                    <el-input 
                      v-model="member.memberEmail" 
                      placeholder="请输入邮箱"
                      size="large"
                    />
                  </el-form-item>
                </div>
                
                <!-- 学术信息 -->
                <div class="form-section">
                  <h4 class="section-title">学术信息</h4>
                  <el-form-item :label="'学校'">
                    <el-input 
                      v-model="member.memberSchool" 
                      placeholder="请输入学校"
                      size="large"
                    />
                  </el-form-item>
                  <el-form-item :label="'院系'">
                    <el-input 
                      v-model="member.memberDepartment" 
                      placeholder="请输入院系"
                      size="large"
                    />
                  </el-form-item>
                  <el-form-item :label="'专业'">
                    <el-input 
                      v-model="member.memberMajor" 
                      placeholder="请输入专业"
                      size="large"
                    />
                  </el-form-item>
                </div>
                
                <!-- 身份信息 -->
                <div class="form-section">
                  <h4 class="section-title">身份信息</h4>
                  <el-form-item :label="'学号'">
                    <el-input 
                      v-model="member.memberStudentId" 
                      placeholder="请输入学号"
                      size="large"
                    />
                  </el-form-item>
                  <el-form-item :label="'身份证号'">
                    <el-input 
                      v-model="member.memberIdCard" 
                      placeholder="请输入身份证号"
                      size="large"
                    />
                  </el-form-item>
                </div>
                
                <!-- 证件上传 -->
                <div class="form-section">
                  <h4 class="section-title">证件上传</h4>
                  <el-form-item :label="'学生证图片'">
                    <MinioImageUpload 
                      v-model="member.memberStudentCardUrl"
                      :limit="1"
                      :file-size="2"
                      :file-type="['jpg', 'png', 'jpeg']"
                      :show-file-list="true"
                      @upload-success="(data) => handleMemberCardSuccess(data, index)"
                    />
                  </el-form-item>
                  <el-form-item :label="'身份证图片'">
                    <MinioImageUpload 
                      v-model="member.memberIdCardUrl"
                      :limit="1"
                      :file-size="2"
                      :file-type="['jpg', 'png', 'jpeg']"
                      :show-file-list="true"
                      @upload-success="(data) => handleMemberIdCardSuccess(data, index)"
                    />
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 个人赛信息 -->
        <div v-if="form.signupType === 1">
          <el-divider content-position="left">
            <span style="color: #409eff; font-weight: 600;">
              <i class="el-icon-user" style="margin-right: 8px;"></i>
              参赛者信息
            </span>
          </el-divider>
          
          <div class="individual-section">
            <!-- 2x2 网格布局 -->
            <div class="form-grid">
              <!-- 基本信息 -->
              <div class="form-section">
                <h4 class="section-title">基本信息</h4>
                <el-form-item label="参赛者姓名" prop="participantName">
                  <el-input 
                    v-model="form.participantName" 
                    placeholder="请输入参赛者姓名"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="联系电话" prop="contactPhone">
                  <el-input 
                    v-model="form.contactPhone" 
                    placeholder="请输入联系电话"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="联系邮箱" prop="contactEmail">
                  <el-input 
                    v-model="form.contactEmail" 
                    placeholder="请输入联系邮箱"
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <!-- 学术信息 -->
              <div class="form-section">
                <h4 class="section-title">学术信息</h4>
                <el-form-item label="所在学校" prop="schoolName">
                  <el-input 
                    v-model="form.schoolName" 
                    placeholder="请输入所在学校"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="所在院系" prop="department">
                  <el-input 
                    v-model="form.department" 
                    placeholder="请输入所在院系"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="专业" prop="major">
                  <el-input 
                    v-model="form.major" 
                    placeholder="请输入专业"
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <!-- 身份信息 -->
              <div class="form-section">
                <h4 class="section-title">身份信息</h4>
                <el-form-item label="学号" prop="studentId">
                  <el-input 
                    v-model="form.studentId" 
                    placeholder="请输入学号"
                    size="large"
                  />
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                  <el-input 
                    v-model="form.idCard" 
                    placeholder="请输入身份证号"
                    size="large"
                  />
                </el-form-item>
              </div>
              
              <!-- 证件上传 -->
              <div class="form-section">
                <h4 class="section-title">证件上传</h4>
                <el-form-item label="学生证图片" prop="studentCardUrl">
                  <MinioImageUpload 
                    v-model="form.studentCardUrl"
                    :limit="1"
                    :file-size="2"
                    :file-type="['jpg', 'png', 'jpeg']"
                    :show-file-list="true"
                    @upload-success="handleStudentCardSuccess"
                  />
                </el-form-item>
                <el-form-item label="身份证图片" prop="idCardUrl">
                  <MinioImageUpload 
                    v-model="form.idCardUrl"
                    :limit="1"
                    :file-size="2"
                    :file-type="['jpg', 'png', 'jpeg']"
                    :show-file-list="true"
                    @upload-success="handleIdCardSuccess"
                  />
                </el-form-item>
              </div>
            </div>
            
            <el-form-item label="备注" prop="remark">
              <el-input 
                v-model="form.remark" 
                type="textarea" 
                :rows="3"
                placeholder="请输入备注信息（选填）"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </div>
        </div>
        
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog title="报名详情" v-model="viewOpen" width="800px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="报名ID">{{ viewForm.id }}</el-descriptions-item>
        <el-descriptions-item label="竞赛名称">{{ getCompetitionName(viewForm.competitionId) }}</el-descriptions-item>
        <el-descriptions-item label="组名">{{ viewForm.groupName || '无' }}</el-descriptions-item>
        <el-descriptions-item label="参赛者姓名">{{ viewForm.participantName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ viewForm.contactPhone }}</el-descriptions-item>
        <el-descriptions-item label="联系邮箱">{{ viewForm.contactEmail || '无' }}</el-descriptions-item>
        <el-descriptions-item label="所在学校">{{ viewForm.schoolName }}</el-descriptions-item>
        <el-descriptions-item label="所在院系">{{ viewForm.department || '无' }}</el-descriptions-item>
        <el-descriptions-item label="专业">{{ viewForm.major || '无' }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ viewForm.studentId || '无' }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ viewForm.idCard || '无' }}</el-descriptions-item>
        <el-descriptions-item label="报名类型">
          <el-tag :type="viewForm.signupType === 1 ? 'success' : 'warning'" size="small">
            {{ viewForm.signupType === 1 ? '个人赛' : '团队赛' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="报名状态">
          <el-tag :type="getStatusType(viewForm.status)" size="small">
            {{ getStatusText(viewForm.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="团队成员数量">{{ viewForm.teamMemberCount || 1 }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDateTime(viewForm.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="审核时间" v-if="viewForm.auditTime">{{ formatDateTime(viewForm.auditTime) }}</el-descriptions-item>
        <el-descriptions-item label="审核人" v-if="viewForm.auditBy">{{ viewForm.auditBy }}</el-descriptions-item>
        <el-descriptions-item label="审核备注" v-if="viewForm.auditRemark" :span="2">{{ viewForm.auditRemark }}</el-descriptions-item>
        <el-descriptions-item label="备注" v-if="viewForm.remark" :span="2">{{ viewForm.remark }}</el-descriptions-item>
      </el-descriptions>
      <!-- 证件图片展示 -->
      <div v-if="viewForm.studentCardUrl || viewForm.idCardUrl" style="margin-top: 20px;">
        <h4>证件图片：</h4>
        <div class="document-images-container">
          <div v-if="viewForm.studentCardUrl" class="document-image-item">
            <p class="image-label">学生证</p>
            <el-image 
              :src="viewForm.studentCardUrl" 
              class="document-image"
              fit="cover"
              :preview-src-list="[viewForm.studentCardUrl]"
              preview-teleported
            />
          </div>
          <div v-if="viewForm.idCardUrl" class="document-image-item">
            <p class="image-label">身份证</p>
            <el-image 
              :src="viewForm.idCardUrl" 
              class="document-image"
              fit="cover"
              :preview-src-list="[viewForm.idCardUrl]"
              preview-teleported
            />
          </div>
        </div>
      </div>
      
      <!-- 团队成员信息 -->
      <div v-if="viewForm.signupType === 2 && viewTeamMembers && viewTeamMembers.length > 0" style="margin-top: 20px;">
        <h4>团队成员信息（共{{ viewTeamMembers.length }}人）：</h4>
        <el-table :data="viewTeamMembers" border style="width: 100%">
          <el-table-column prop="memberName" label="姓名" width="100" />
          <el-table-column prop="memberPhone" label="电话" width="120" />
          <el-table-column prop="memberEmail" label="邮箱" width="150" />
          <el-table-column prop="memberSchool" label="学校" width="120" />
          <el-table-column prop="memberDepartment" label="院系" width="120" />
          <el-table-column prop="memberMajor" label="专业" width="120" />
          <el-table-column prop="memberStudentId" label="学号" width="100" />
          <el-table-column prop="memberIdCard" label="身份证号" width="150" />
        </el-table>
        
        <!-- 团队成员证件图片 -->
        <div v-for="(member, index) in viewTeamMembers" :key="index" style="margin-top: 15px;">
          <h5>{{ member.memberName }} 的证件：</h5>
          <div class="document-images-container">
            <div v-if="member.memberStudentCardUrl" class="document-image-item">
              <p class="image-label">学生证</p>
              <el-image 
                :src="member.memberStudentCardUrl" 
                class="document-image"
                fit="cover"
                :preview-src-list="[member.memberStudentCardUrl]"
                preview-teleported
              />
            </div>
            <div v-if="member.memberIdCardUrl" class="document-image-item">
              <p class="image-label">身份证</p>
              <el-image 
                :src="member.memberIdCardUrl" 
                class="document-image"
                fit="cover"
                :preview-src-list="[member.memberIdCardUrl]"
                preview-teleported
              />
            </div>
          </div>
        </div>
      </div>
      
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="审核报名" v-model="auditOpen" width="500px" append-to-body>
      <el-form ref="auditForm" :model="auditForm" label-width="100px">
        <el-form-item label="报名ID">{{ auditForm.id }}</el-form-item>
        <el-form-item label="参赛者姓名">{{ auditForm.participantName }}</el-form-item>
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="auditForm.status">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核备注" prop="auditRemark">
          <el-input v-model="auditForm.auditRemark" type="textarea" placeholder="请输入审核备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAudit">确 定</el-button>
          <el-button @click="auditOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { listCompetitionSignup, getCompetitionSignup, delCompetitionSignup, addCompetitionSignup, updateCompetitionSignup, auditSignup } from "@/api/race/competitionSignup";
import { listCompetition } from "@/api/race/competition";
import { getCompetitionRules } from "@/api/race/competitionDetail";
import { listTeamMembersBySignupId } from "@/api/race/teamMember";
import MinioImageUpload from "@/components/MinioImageUpload/index.vue";

export default {
  name: "CompetitionSignup",
  components: {
    MinioImageUpload
  },
  dicts: ['race_signup_type', 'race_signup_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 竞赛报名信息表格数据
      signupList: [],
      // 竞赛列表
      competitionList: [],
      // 竞赛规则列表
      competitionRulesList: [],
      // 最大团队人数
      maxTeamSize: 10,
      // 团队成员列表
      teamMembers: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示查看弹出层
      viewOpen: false,
      // 是否显示审核弹出层
      auditOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        competitionId: null,
        participantName: null,
        schoolName: null,
        signupType: null,
        status: null
      },
      // 表单参数
      form: {},
      // 查看表单参数
      viewForm: {},
      // 查看时的团队成员列表
      viewTeamMembers: [],
      // 审核表单参数
      auditForm: {},
      // 表单校验
      rules: {
        competitionId: [
          { required: true, message: "竞赛名称不能为空", trigger: "change" }
        ],
        participantName: [
          { required: true, message: "参赛者姓名不能为空", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        schoolName: [
          { required: true, message: "所在学校不能为空", trigger: "blur" }
        ],
        signupType: [
          { required: true, message: "报名类型不能为空", trigger: "change" }
        ],
        groupName: [
          { 
            validator: (rule, value, callback) => {
              if (this.form.signupType === 2 && (!value || value.trim() === '')) {
                callback(new Error('团队赛时组名不能为空'));
              } else {
                callback();
              }
            }, 
            trigger: "blur" 
          }
        ]
      }
    };
  },
  created() {
    // 确保竞赛列表优先加载，然后再加载报名列表
    this.getCompetitionList().then(() => {
      this.getList();
    }).catch(error => {
      console.error('初始化竞赛列表失败:', error);
      this.getList(); // 即使竞赛列表加载失败，也尝试加载报名列表
    });
    
    this.getCompetitionRulesList();
  },
  methods: {
    /** 查询竞赛报名信息列表 */
    getList() {
      this.loading = true;
      listCompetitionSignup(this.queryParams).then(response => {
        if (response && response.rows && Array.isArray(response.rows)) {
          this.signupList = response.rows.map(item => {
            return {
              id: item.id || 0,
              competitionId: item.competitionId || null,
              groupName: item.groupName || null,
              participantName: item.participantName || '',
              contactPhone: item.contactPhone || '',
              schoolName: item.schoolName || '',
              signupType: item.signupType || 1,
              status: item.status !== undefined ? item.status : 0,
              createTime: item.createTime || null,
              ...item // 保留其他字段
            };
          });
          this.total = response.total || 0;
        } else {
          this.signupList = [];
          this.total = 0;
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取报名列表失败:', error);
        this.signupList = [];
        this.total = 0;
        this.loading = false;
      });
    },
    /** 查询竞赛列表 */
    getCompetitionList() {
      return listCompetition({}).then(response => {
        this.competitionList = response.rows || [];
      }).catch(error => {
        console.error('获取竞赛列表失败:', error);
        this.competitionList = [];
      });
    },
    /** 查询竞赛规则列表 */
    getCompetitionRulesList() {
      // 这里需要调用竞赛规则API，暂时用模拟数据
      this.competitionRulesList = [];
    },
    /** 处理竞赛选择变化 */
    handleCompetitionChange(competitionId) {
      if (competitionId) {
        // 获取竞赛的赛制信息
        this.getCompetitionRulesInfo(competitionId);
      }
    },
    
    /** 获取竞赛赛制信息 */
    getCompetitionRulesInfo(competitionId) {
      getCompetitionRules(competitionId).then(response => {
        if (response.code === 200 && response.data) {
          const rules = response.data;
          
          // 根据赛制类型设置报名类型
          // competitionType: 1-团队赛, 2-个人赛
          // signupType: 1-个人赛, 2-团队赛 (与competitionType相反)
          this.form.signupType = rules.competitionType === 1 ? 2 : 1;
          this.maxTeamSize = rules.maxParticipants || 10;
          
          // 设置团队人数初始值
          if (this.form.signupType === 2) {
            // 团队赛，默认2人（队长+1个成员）
            this.form.teamMemberCount = Math.min(2, this.maxTeamSize);
            this.initTeamMembers();
          } else {
            // 个人赛
            this.form.teamMemberCount = 1;
            this.teamMembers = [];
          }
          
          // 显示赛制信息提示
          this.$message.success(`已选择${rules.competitionType === 1 ? '团队赛' : '个人赛'}，最大人数：${this.maxTeamSize}人`);
          
          // 强制更新视图
          this.$forceUpdate();
        } else {
          this.$message.error(response.msg || '获取赛制信息失败');
          // 使用备用逻辑：根据竞赛名称判断
          this.fallbackToCompetitionName(competitionId);
        }
      }).catch(error => {
        this.$message.error('获取赛制信息失败，尝试使用备用逻辑');
        // 使用备用逻辑：根据竞赛名称判断
        this.fallbackToCompetitionName(competitionId);
      });
    },
    
    /** 备用逻辑：根据竞赛名称判断赛制 */
    fallbackToCompetitionName(competitionId) {
      const competition = this.competitionList.find(c => c.id === competitionId);
      if (competition) {
        // 根据竞赛名称判断是否为团队赛
        if (competition.name && (
          competition.name.includes('团队') || 
          competition.name.includes('创新创业') ||
          competition.name.includes('协作')
        )) {
          this.form.signupType = 2; // 团队赛
          this.maxTeamSize = 6; // 默认最大6人
          this.form.teamMemberCount = Math.min(2, this.maxTeamSize);
          this.initTeamMembers();
          this.$message.success('已选择团队赛，最大人数：6人（使用备用逻辑）');
        } else {
          this.form.signupType = 1; // 个人赛
          this.maxTeamSize = 1;
          this.form.teamMemberCount = 1;
          this.teamMembers = [];
          this.$message.success('已选择个人赛（使用备用逻辑）');
        }
        this.$forceUpdate();
      } else {
        this.$message.error('未找到竞赛信息');
        // 设置默认值
        this.form.signupType = 1;
        this.maxTeamSize = 1;
        this.form.teamMemberCount = 1;
        this.teamMembers = [];
      }
    },
    
    /** 初始化团队成员 */
    initTeamMembers() {
      this.teamMembers = [];
      // teamMembers数组只包含团队成员，不包括队长
      // teamMemberCount包括队长，所以团队成员数量 = teamMemberCount - 1
      const memberCount = Math.max(0, this.form.teamMemberCount - 1);
      for (let i = 0; i < memberCount; i++) {
        this.teamMembers.push({
          memberName: '',
          memberPhone: '',
          memberEmail: '',
          memberSchool: '',
          memberDepartment: '',
          memberMajor: '',
          memberStudentId: '',
          memberIdCard: '',
          memberStudentCardUrl: '',
          memberIdCardUrl: '',
          isLeader: 0
        });
      }
    },
    /** 处理团队人数变化 */
    handleTeamSizeChange(value) {
      if (value > this.maxTeamSize) {
        this.$message.warning(`团队人数不能超过${this.maxTeamSize}人`);
        this.form.teamMemberCount = this.maxTeamSize;
        return;
      }
      
      this.form.teamMemberCount = value;
      this.initTeamMembers();
    },
    
    /** 添加团队成员 */
    addTeamMember() {
      // 检查是否超过最大团队人数（包括队长）
      if (this.form.teamMemberCount >= this.maxTeamSize) {
        this.$message.warning(`团队人数不能超过${this.maxTeamSize}人`);
        return;
      }
      
      this.teamMembers.push({
        memberName: '',
        memberPhone: '',
        memberEmail: '',
        memberSchool: '',
        memberDepartment: '',
        memberMajor: '',
        memberStudentId: '',
        memberIdCard: '',
        memberStudentCardUrl: '',
        isLeader: 0
      });
      this.form.teamMemberCount = this.teamMembers.length + 1; // +1 包括队长
    },
    
    /** 删除团队成员 */
    removeTeamMember(index) {
      if (this.teamMembers.length <= 0) {
        this.$message.warning('没有可删除的团队成员');
        return;
      }
      
      this.$confirm('确定要删除这个团队成员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.teamMembers.splice(index, 1);
        this.form.teamMemberCount = this.teamMembers.length + 1; // +1 包括队长
        this.$message.success('删除成功');
      }).catch(() => {
        // 用户取消删除
      });
    },
    /** 处理成员学生证上传成功 */
    handleMemberCardSuccess(data, index) {
      this.teamMembers[index].memberStudentCardUrl = data.url;
    },
    /** 处理成员身份证上传成功 */
    handleMemberIdCardSuccess(data, index) {
      this.teamMembers[index].memberIdCardUrl = data.url;
    },
    /** 加载团队成员信息 */
    loadTeamMembers(signupId) {
      listTeamMembersBySignupId(signupId).then(response => {
        this.teamMembers = response.data || [];
        // 团队成员数量 = 实际团队成员数量 + 1（队长）
        this.form.teamMemberCount = this.teamMembers.length + 1;
        console.log('加载团队成员信息成功:', this.teamMembers.length, '个成员，总人数:', this.form.teamMemberCount);
      }).catch(error => {
        console.error('加载团队成员信息失败:', error);
        this.teamMembers = [];
        this.form.teamMemberCount = 1; // 失败时只有队长
      });
    },
    /** 加载查看时的团队成员信息 */
    loadViewTeamMembers(signupId) {
      listTeamMembersBySignupId(signupId).then(response => {
        this.viewTeamMembers = response.data || [];
        console.log('加载团队成员信息成功:', this.viewTeamMembers.length, '个成员');
      }).catch(error => {
        console.error('加载查看团队成员信息失败:', error);
        this.viewTeamMembers = [];
      });
    },
    /** 获取竞赛名称 */
    getCompetitionName(competitionId) {
      if (!competitionId) return '--';
      if (!this.competitionList || !Array.isArray(this.competitionList)) {
        return '--';
      }
      const competition = this.competitionList.find(c => c && c.id == competitionId);
      return competition ? competition.name : '--';
    },
    /** 获取状态文本 */
    getStatusText(status) {
      switch (status) {
        case 0: return '待审核';
        case 1: return '已通过';
        case 2: return '已拒绝';
        default: return '未知';
      }
    },
    /** 获取状态类型 */
    getStatusType(status) {
      switch (status) {
        case 0: return 'warning';
        case 1: return 'success';
        case 2: return 'danger';
        default: return 'info';
      }
    },
    /** 格式化日期时间 */
    formatDateTime(dateTime) {
      if (!dateTime) return '--';
      try {
        const date = new Date(dateTime);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (error) {
        console.error('日期格式化错误:', error);
        return dateTime; // 如果格式化失败，返回原始值
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        competitionId: null,
        groupName: null,
        participantName: null,
        contactPhone: null,
        contactEmail: null,
        schoolName: null,
        department: null,
        major: null,
        studentId: null,
        studentCardUrl: null,
        idCard: null,
        idCardUrl: null,
        signupType: 1, // 默认为个人赛
        teamLeader: 0,
        teamMemberCount: 1,
        status: 0,
        auditRemark: null,
        auditTime: null,
        auditBy: null,
        delFlag: "0",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        // 队长信息字段
        leaderName: null,
        leaderPhone: null,
        leaderEmail: null,
        leaderSchool: null,
        leaderDepartment: null,
        leaderMajor: null,
        leaderStudentId: null,
        leaderIdCard: null,
        leaderStudentCardUrl: null,
        leaderIdCardUrl: null
      };
      this.teamMembers = [];
      this.maxTeamSize = 10;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (selection && Array.isArray(selection)) {
        this.ids = selection.map(item => item && item.id ? item.id : null).filter(id => id !== null);
        this.single = selection.length !== 1;
        this.multiple = selection.length === 0;
      } else {
        this.ids = [];
        this.single = true;
        this.multiple = true;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加竞赛报名信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCompetitionSignup(id).then(response => {
        this.form = response.data;
        
        // 如果是团队赛，将队长信息映射到队长字段
        if (this.form.signupType === 2) {
          // 将报名信息中的队长数据映射到队长字段
          this.form.leaderName = this.form.participantName;
          this.form.leaderPhone = this.form.contactPhone;
          this.form.leaderEmail = this.form.contactEmail;
          this.form.leaderSchool = this.form.schoolName;
          this.form.leaderDepartment = this.form.department;
          this.form.leaderMajor = this.form.major;
          this.form.leaderStudentId = this.form.studentId;
          this.form.leaderIdCard = this.form.idCard;
          this.form.leaderStudentCardUrl = this.form.studentCardUrl;
          this.form.leaderIdCardUrl = this.form.idCardUrl;
          
          // 加载团队成员信息
          this.loadTeamMembers(id);
        }
        
        this.open = true;
        this.title = "修改竞赛报名信息";
      });
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.viewForm = row;
      
      // 先清空团队成员列表
      this.viewTeamMembers = [];
      
      // 如果是团队赛，加载团队成员信息
      if (row.signupType === 2) {
        this.loadViewTeamMembers(row.id);
      }
      
      this.viewOpen = true;
    },
    /** 审核按钮操作 */
    handleAudit(row, status) {
      this.auditForm = {
        id: row.id,
        participantName: row.participantName,
        status: status,
        auditRemark: ''
      };
      this.auditOpen = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 如果是团队赛，验证团队成员信息
          if (this.form.signupType === 2) {
            if (!this.validateTeamMembers()) {
              return;
            }
            // 将团队成员信息添加到表单数据中
            this.form.teamMembers = this.teamMembers;
          }
          
          // 调试：打印提交的数据
          console.log('提交的表单数据:', JSON.stringify(this.form, null, 2));
          
          if (this.form.id != null) {
            updateCompetitionSignup(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCompetitionSignup(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 验证团队成员信息 */
    validateTeamMembers() {
      // 验证队长信息
      if (!this.form.leaderName || this.form.leaderName.trim() === '') {
        this.$modal.msgError('队长姓名不能为空');
        return false;
      }
      
      if (!this.form.leaderPhone || this.form.leaderPhone.trim() === '') {
        this.$modal.msgError('队长电话不能为空');
        return false;
      }
      
      if (!this.form.leaderSchool || this.form.leaderSchool.trim() === '') {
        this.$modal.msgError('队长学校不能为空');
        return false;
      }
      
      // 验证队长电话号码格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.form.leaderPhone)) {
        this.$modal.msgError('队长电话号码格式不正确');
        return false;
      }
      
      // 验证队长邮箱格式（如果填写了邮箱）
      if (this.form.leaderEmail && this.form.leaderEmail.trim() !== '') {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(this.form.leaderEmail)) {
          this.$modal.msgError('队长邮箱格式不正确');
          return false;
        }
      }
      
      // 验证团队成员信息
      for (let i = 0; i < this.teamMembers.length; i++) {
        const member = this.teamMembers[i];
        const memberTitle = `成员${i + 1}`;
        
        if (!member.memberName || member.memberName.trim() === '') {
          this.$modal.msgError(`${memberTitle}姓名不能为空`);
          return false;
        }
        if (!member.memberPhone || member.memberPhone.trim() === '') {
          this.$modal.msgError(`${memberTitle}电话不能为空`);
          return false;
        }
        if (!member.memberSchool || member.memberSchool.trim() === '') {
          this.$modal.msgError(`${memberTitle}学校不能为空`);
          return false;
        }
        
        // 验证电话号码格式
        if (!phoneRegex.test(member.memberPhone)) {
          this.$modal.msgError(`${memberTitle}电话号码格式不正确`);
          return false;
        }
        
        // 验证邮箱格式（如果填写了邮箱）
        if (member.memberEmail && member.memberEmail.trim() !== '') {
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!emailRegex.test(member.memberEmail)) {
            this.$modal.msgError(`${memberTitle}邮箱格式不正确`);
            return false;
          }
        }
      }
      return true;
    },
    /** 提交审核 */
    submitAudit() {
      auditSignup(this.auditForm.id, this.auditForm.status, this.auditForm.auditRemark).then(response => {
        this.$modal.msgSuccess("审核成功");
        this.auditOpen = false;
        this.getList();
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除竞赛报名信息编号为"' + ids + '"的数据项？').then(function() {
        return delCompetitionSignup(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('race/competitionSignup/export', {
        ...this.queryParams
      }, `竞赛报名信息_${new Date().getTime()}.xlsx`)
    },
    /** 学生证上传成功 */
    handleStudentCardSuccess(data) {
      this.form.studentCardUrl = data.url;
    },
    /** 身份证上传成功 */
    handleIdCardSuccess(data) {
      this.form.idCardUrl = data.url;
    },
    /** 队长学生证上传成功 */
    handleLeaderCardSuccess(data) {
      this.form.leaderStudentCardUrl = data.url;
    },
    /** 队长身份证上传成功 */
    handleLeaderIdCardSuccess(data) {
      this.form.leaderIdCardUrl = data.url;
    },
  }
};
</script>

<style scoped>
.upload-preview {
  margin-top: 10px;
}

/* 确保标签完整显示 */
.el-form-item__label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

/* 优化表格显示 */
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 操作按钮样式优化 */
.el-button--text {
  padding: 5px 8px;
  margin: 0 2px;
}

/* 搜索表单优化 */
.el-form--inline .el-form-item {
  margin-right: 15px;
  margin-bottom: 10px;
}

.el-form--inline .el-form-item__label {
  width: 80px !important;
  text-align: right;
  padding-right: 8px;
}

/* 表格优化 */
.el-table {
  min-height: 400px;
}

.el-table__body-wrapper {
  min-height: 300px;
}

.el-table .el-table__empty-block {
  min-height: 300px;
}

.el-table .el-table__empty-text {
  color: #909399;
  font-size: 14px;
}

/* 表单整体样式 */
.form-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.form-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: #e6f7ff;
}

/* 2x2 网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

.form-grid .form-section {
  margin-bottom: 0;
  height: auto;
  min-height: auto;
}

/* 个人赛区域 */
.individual-section {
  background: #fafafa;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
}

.section-title {
  color: #409eff;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e6f7ff;
  position: relative;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #409eff, #36cfc9);
  border-radius: 1px;
}

.section-subtitle {
  color: #666;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 15px 0;
  padding-left: 10px;
  border-left: 3px solid #409eff;
}

/* 团队队长区域样式 */
.team-leader-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 20px;
  border: 1px solid #bae7ff;
  position: relative;
  overflow: hidden;
}

.team-leader-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(30px, -30px);
}

/* 团队成员卡片样式 */
.team-member-card {
  border: 1px solid #e4e7ed;
  border-radius: 16px;
  padding: 0;
  margin-bottom: 24px;
  background: #ffffff;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.team-member-card:hover {
  border-color: #409eff;
  box-shadow: 0 8px 32px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.team-member-card.leader {
  background: linear-gradient(135deg, #fff7e6 0%, #fff1b8 100%);
  border-color: #faad14;
  box-shadow: 0 4px 20px rgba(250, 173, 20, 0.15);
}

.team-member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-bottom: 1px solid #e8e8e8;
}

.team-member-card.leader .team-member-header {
  background: linear-gradient(135deg, #fffbe6 0%, #fff7cc 100%);
  border-bottom-color: #ffd666;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.leader-avatar {
  background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
  box-shadow: 0 4px 12px rgba(250, 173, 20, 0.3);
}

.member-details {
  flex: 1;
}

.team-member-title {
  margin: 0;
  color: #262626;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
}

.team-member-title.leader {
  color: #d46b08;
}

.member-role {
  margin: 4px 0 0 0;
  color: #8c8c8c;
  font-size: 13px;
  font-weight: 400;
}

.member-form-content {
  padding: 25px;
}

.remove-member-btn {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
  width: 32px;
  height: 32px;
}

.remove-member-btn:hover {
  background: #ff7875;
  border-color: #ff7875;
  transform: scale(1.1);
}

/* 上传区域样式 */
.upload-container {
  text-align: center;
}

/* 水平上传布局 */
.upload-container.upload-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  text-align: left;
}

.upload-container.upload-horizontal .upload-content {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.upload-container.upload-horizontal .upload-tip {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
}

.upload-container.upload-horizontal .upload-tip p {
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.4;
}

.upload-tip {
  margin: 8px 0 0 0;
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1.4;
}

.upload-tip .highlight {
  color: #ff4d4f;
  font-weight: 500;
}

/* 团队成员统计信息样式 */
.team-stats {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.team-stats .stats-item {
  display: flex;
  align-items: center;
  color: #495057;
  font-size: 14px;
  font-weight: 500;
}

.team-stats .stats-item .icon {
  margin-right: 8px;
  color: #409eff;
  font-size: 16px;
}

/* 添加成员按钮样式 */
.add-member-btn {
  margin-left: 10px;
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
  transition: all 0.3s ease;
}

.add-member-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
}

.add-member-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 表单输入框样式优化 */
.el-form-item__label {
  font-weight: 500;
  color: #262626;
}

.el-input--large .el-input__inner {
  height: 44px;
  line-height: 44px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
}

.el-input--large .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
}

.el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 对话框样式优化 */
.el-dialog {
  border-radius: 16px;
  overflow: hidden;
}

.el-dialog__header {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 20px 24px;
  border-bottom: 1px solid #e6f7ff;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.el-dialog__body {
  padding: 24px;
  background: #fafafa;
}

.el-dialog__footer {
  background: #ffffff;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}

/* 按钮样式优化 */
.dialog-footer .el-button {
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 500;
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #36cfc9 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.dialog-footer .el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
}

/* 分隔线样式 */
.el-divider {
  margin: 24px 0;
}

.el-divider__text {
  background: #fafafa;
  padding: 0 20px;
  font-weight: 600;
  color: #409eff;
}

/* 证件图片展示样式 */
.document-images-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 10px;
}

.document-image-item {
  text-align: center;
  flex: 1;
  max-width: 200px;
}

.image-label {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.document-image {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #e4e7ed;
}

.document-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 15px;
  }
  
  .form-section {
    padding: 15px;
  }
  
  .team-member-header {
    padding: 15px 20px;
  }
  
  .member-form-content {
    padding: 20px;
  }
  
  .member-avatar {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .team-member-title {
    font-size: 16px;
  }
  
  .individual-section,
  .team-leader-section {
    padding: 20px;
  }
  
  /* 移动端证件图片样式 */
  .document-images-container {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .document-image-item {
    max-width: none;
  }
  
  .document-image {
    width: 150px;
    height: 110px;
  }
}

@media (max-width: 480px) {
  .form-grid {
    gap: 10px;
  }
  
  .form-section {
    padding: 12px;
  }
  
  .section-title {
    font-size: 14px;
  }
  
  .individual-section,
  .team-leader-section {
    padding: 15px;
  }
}
</style>
